<template>

<div>
  <div class="background">
      <!-- <img  src=require('../assets/background.png') width="100%" height="100%"> -->
       <img  src="../../assets/background.png" style=" width:100%; height:100%;">
  </div>
<div class="login_bg">
    <div class="login_wrap">
        <div class="form_wrap">
            <h2 class="logo-text">Philo-咖啡店管理系统</h2>  
            <el-form
                ref="formRef"
                :model="loginData"
                :rules="rules"
                label-width="100px"
                class="demo-ruleForm">
                <p> </p>
                <el-form-item label="用户" prop="username" :rules="[{required: true,message: '此项必填',trigger: 'blur'},]">
                <el-input v-model="loginData. username" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="Password" prop="password">
                <el-input v-model= "loginData.password" type="password" autocomplete="off" />
                </el-form-item>
               <h1> </h1>
                <el-form-item>
                <el-button type="primary" @click="handleLogin">Submit</el-button>
                <h2 class="logo-text"></h2>
                 <h2 class="logo-text"></h2>
                  <h2 class="logo-text"></h2>
                <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
                <!-- <p>{{num}}</p>  -->
                </el-form-item> 
            </el-form>
        </div>

    </div> 
</div>
</div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { useStore } from "vuex"
import axios from '../../utils/axios';
import { ElMessageBox, ElMessage } from 'element-plus';
import {useRouter} from "vue-router"
export default {
    name:"login",
    setup(){
        const store =useStore()
        const router = useRouter()
        const count=store.state.number.count
        const data=reactive({
            loginData:{
                username:"",
                password:""
            },
            num:count,
            numStatus:store.getters.countStatus
        })
        const handleLogin=()=>{
            data.loginData
            store.commit('setUserInfo', data.loginData);
            localStorage.setItem("loginData",JSON.stringify(data.loginData));
            localStorage.setItem("token","liushuyu");

            axios.get(`/user/login/${data.loginData.username}/${data.loginData.password}`).then((res)=>{
                console.log('res为：', res);
                console.log('res.data:', res.data); 
                 if (res.code == 200) {
                    let rid = res.data;
                    store.commit('setRid',rid);
                    let rid2 = store.getters.getRid;
                    console.log("myRid",rid2)
                    
            router.push({
                path:"/main"
            })
                   
      } else {
        ElMessage.error(res.msg);
      }

            }).catch((err) => {
                console.error(err);
                ElMessage.error('登录失败');
            });


        }
        // console.log("修改qian:getters",store.getters["number/countStatus"])
        // const handleLogin=()=>{
        //     // store.commit('number/setCount',100)
        //     store.dispatch('number/setCountPromise',-1).then(res=>{
        //         alert("xiugai ok")
        //     }).catch(err=>{
        //         alert(err)
        //     }

        //     );
        //     console.log(store.state.number.count)
        //      console.log("修改后getters",store.getters["number/countStatus"])
        // }
        return{
            ...toRefs(data),
            handleLogin
        }
    }
}
</script>
<style scoped>
.background{
    width:100%;  
    height:100%;  /**宽高100%是为了图片铺满屏幕 */
     z-index:-1;
    position: absolute;
}

.login_bg{
    /* background:  url("../../assets/login_bg.svg");
    position: absolute;
    z-index:0; */
    
}

.login_wrap{
    width: 100%;
    height: 150vh;
    margin-top: -45px;
    margin-left: 40px;
    position: absolute;
    background:  url("../../assets/login_bg.svg");
    z-index:1;
    
}
.form_wrap{
    top:50%;
    left:70%;
    transform: translate(-50%,-50%);
    background: #f2f8ff;
    padding: 50px 30px;
    padding-top: 20px;
      border: 1px solid #f3f9ff;
    border-radius: 10px;
    border-width: 2px;
    float:right;
    margin-top: 400px;
    height: 220px;
    text-align: center;

}
 .logo-text {
          padding: 20px 0 20px 25px;
          margin: 0;
          font-size: 32px;
          font-weight: bold;
          color: #34495e;
          white-space: nowrap;
        }
</style>